<template>
    <div style="display: flex;justify-content: center;align-items: center;height: 100%">
        <el-card style="width: 441px;">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="右侧头部">
                    <el-input v-model="form.customHead"></el-input>
                </el-form-item>
                <el-form-item label="右侧位置">
                    <el-input v-model="form.customLocation"></el-input>
                </el-form-item>
                <el-form-item label="右侧名字">
                    <el-input v-model="form.customName"></el-input>
                </el-form-item>
                <el-form-item label="广告图">
                    <el-image
                            style="width: 50px; height: 50px"
                            :src="form.customAdverImg"
                            :preview-src-list="[form.customAdverImg]"
                    ></el-image>
                </el-form-item>
                <el-form-item label="广告主体">
                    <el-input size="small" type="textarea" v-model="form.customAdverBody"></el-input>
                </el-form-item>
                <!--                <buttom></buttom>-->
                <div style="display: flex;justify-content: center">
                    <el-upload
                            class="upload-demo"
                            action="http://localhost:8888/admin/type/upload"

                            multiple
                            :limit="3"
                            :on-success="upload"
                            :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </div>
                <div style="display: flex;justify-content: center">
                    <el-button @click="submit()">提交</el-button>

                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    // import Global from "../../assets/js/Global";
    import Global from "../../../public/static/Global";

    export default {
        name: "AdminCustom"
        ,
        data() {
            return {
                form: {
                    customAdverBody: "",
                    customAdverImg: "",
                    customHead: "",
                    customLocation: "",
                    customName: ""
                }
            }
        },
        methods: {
            // async get
            async getCustomInfo() {
                const {data: res} = await this.$http.get('/admin/custom')
                this.form = res.data;
                this.form.customAdverImg = Global.baseUrl + res.data.customAdverImg
                console.log(res);
            },
            upload(response, file, fileList) { // 分类上传成功后的钩子
                console.log(response)
                console.log(file)
                this.form.customAdverImg = response.data;  // 上传成功后的名字
                console.log(fileList);
            },
            async submit() {
                let img = this.form.customAdverImg
                var i = img.lastIndexOf('/')
                if (i > 0) {
                    img = img.substring(i + 1)
                }
                this.form.customAdverImg = img;
                const {data: res} = await this.$http.put('/admin/custom', this.form)

                if (res.meta.status === 200) {
                    this.$message.success('添加成功')
                    this.getCustomInfo();
                } else {
                    this.$message.error("添加失败")
                }
            },

        },
        created() {
            this.getCustomInfo()
        }
    }
</script>

<style scoped>

</style>